<template>
	<div id="salary">
		<el-table :data="salaryList" stripe style="width: 100%">
			<el-table-column prop="wid" label="送水工编号" width="180">
			</el-table-column>
			<el-table-column prop="workerName" label="送水工名称" width="180">
			</el-table-column>
			<el-table-column prop="workerSalary" label="基本工资" width="180">
			</el-table-column>
			<el-table-column prop="workerMoney" label="每桶提成" width="180">
			</el-table-column>
			<el-table-column prop="sendWaterCount" label="送水数量" width="180">
			</el-table-column>
			<el-table-column prop="finalSalary" label="实发工资" width="180">
			</el-table-column>
		</el-table>
		
		<el-pagination background layout="sizes,prev, pager, next,jumper,->,total" :page-size.sync="pageSize"
			:current-page.sync="pageNum" :page-sizes="[10,20]" :total="total" :hide-on-single-page="true"
			@current-change="listSalary" @size-change="listSalary">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				salaryList: [],
				// 新增加 总行数、当前页、每页个数
				total: 0,
				pageNum: 1,
				pageSize: 10,
			}
		},
		methods: {
			listSalary() {
				this.$axios.get('http://localhost:8097/salary/listSalaryPage/' + this.pageNum + '/' + this.pageSize)
					.then((resp) => {
						if (resp.data.responseMessage == "ok") {
							this.salaryList = resp.data.responseData.list;
							this.total = resp.data.responseData.total;
							this.pageNum = resp.data.responseData.pageNum;
							this.$message.success("计算工资列表响应成功");
						} else {
							this.$message.error("计算工资列表显示失败");
						}
					}).catch((error) => {
						console.log(error);
						this.$message.error("计算工资列表请求发送失败");
					})
			}
		},
		created() {
			this.listSalary();
		}
	}
</script>

<style>
</style>
